<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学院项目</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部导航头 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container">
            <a class="navbar-brand text-success" href="index.html">华瑞IT学院</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="top-nav navbar-nav ml-auto font-weight-bold" id="nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#bbs">论坛</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#html5">前端开发</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#course">最新课程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#app">移动APP</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- home -->
    <section id="home">
        <div class="mask">
            <div class="container">
                <div class="row wow fadeInUp" data-wow-delay="1s" data-wow-duration="1s">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <h1>Bootstrap实战课程等你来战！</h1>
                        <p class="mt-3">
                            本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员<br>
                            培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！
                        </p>
                        <!-- 轮播图 -->
                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="./images/banner1.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="./images/banner2.png" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="./images/banner3.jpg" class="d-block w-100" alt="...">
                                </div>
                            </div>
                            <a class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                                data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                                data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- bbs -->
    <section id="bbs">
        <div class="container">
            <div class="row wow fadeInUp" data-wow-duration="1s">
                <div class="box col-12 col-md-4">
                    <a href="#">
                        <img src="./images/a.png" alt="">
                        <h3>Android开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例</p>
                    </a>
                </div>
                <div class="box col-12 col-md-4">
                    <a href="#">
                        <img src="./images/i.png" alt="">
                        <h3>Android开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例</p>
                    </a>
                </div>
                <div class="box col-12 col-md-4">
                    <a href="#">
                        <img src="./images/b.png" alt="">
                        <h3>Android开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例</p>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- html -->
    <section id="html">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 wow fadeInLeft">
                    <h2>HTML5前端开发</h2>
                    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p>
                        <i class="mai glyphicon glyphicon-grain"></i>
                        使用HTML5与CSS3技术轻松实现设备自适应展示。
                    </p>
                    <p>
                        <i class="mai glyphicon glyphicon-grain"></i>
                        清晰明了的语义代码结构，更高的可读性、更利于页面维护的。
                    </p>
                </div>
                <div class="col-12 col-md-6 wow fadeInRight">
                    <img class="img-fluid" src="./images/html5.jpg" alt="">
                </div>
            </div>
        </div>
    </section>
    <section id="bootstrap">
        <div class="container">
            <div class="row wow fadeInUp">
                <div class="col-12 col-md-6">
                    <img class="img-fluid" src="./images/Bootstrap.jpg" alt="">
                </div>
                <div class="col-12 col-md-6">
                    <h2>HTML5前端开发</h2>
                    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p>
                        <i class="mai glyphicon glyphicon-grain"></i>
                        使用HTML5与CSS3技术轻松实现设备自适应展示。
                    </p>
                    <p>
                        <i class="mai glyphicon glyphicon-grain"></i>
                        清晰明了的语义代码结构，更高的可读性、更利于页面维护的。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- course -->
    <section id="course">
        <div class="container">
            <div class="row wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                <div class="col-12">
                    <h2>最新课程</h2>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
                <div class="c-item col-12 col-sm-6 col-md-3">
                    <div class="card">
                        <img class="img-fluid" src="./images/swift.jpg" class="card-img-top" alt="...">
                        <div class="s-card-body card-body">
                            <a href="#" class="btn btn-outline-success">加入学习</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- app -->
    <section id="app">
        <div class="container">
            <div class="row wow fadeInUp">
                <div class="col-12 col-md-6">
                    <h2>华瑞IT学院移动APP下载</h2>
                    <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                    <button class="btn btn-success">
                        <span class="glyphicon glyphicon-download-alt"></span>
                        iPhone版
                    </button>
                    <button class="btn btn-success">
                        <span class="glyphicon glyphicon-download-alt"></span>
                        Android版
                    </button>
                </div>
                <div class="col-12 col-md-6">
                    <img class="img-fluid" src="./images/app-banner.jpg" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- contact -->
    <section id="contact">
        <div class="mask">
            <div class="container">
               <div class="row">
                    <div class="col-12 col-md-6 wow fadeInLeft">
                        <h2>
                            <span class="glyphicon glyphicon-send"></span>
                            &nbsp;
                            联系我们
                        </h2>
                        <p>
                            华瑞IT教育——中南五省IT教育领导品牌，国家重要IT人才培养基地。学校成立于2003年，是一所集IT教育和科研于一体的高科技教育学校。也是仅有的受政府邀请以"园区IT人才入口"身份入驻在国家投资30多亿打造的IT企业园内的IT学校。
                            学校现设有初、高中生和大学生软件开发、移动互联网开发以及计算机艺术设计等相关专业，包括Java 、.Net、安卓、Web前端、UI设计等多个课程方向。
                            同时还设有高等教育、职业教育、自学助考等合作教育项目，形成了多层次、多学科、多边合作的办学模式和教育格局。
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-home"></span>
                            &nbsp;
                            地址:长沙市市高新区中电软件园21~22栋
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-phone-alt"></span>
                            &nbsp;
                            联系电话：0731-89796517
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-envelope"></span>
                            &nbsp;
                            邮箱:hr@huaruiedu.com
                        </p>
                    </div>
                    <div class="col-12 col-md-6 wow fadeInRight">
                        <form action="#" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="您的姓名">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="您的邮箱">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="标题">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" class="form-control btn btn-success" value="提交">
                            </div>
                        </form>
                    </div>
               </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Copyright&nbsp;©&nbsp;2003-2018&nbsp;&nbsp;www.huaruiedu.com&nbsp;&nbsp;
                    </p>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/jquery.singlePageNav.min.js"></script>
<script src="./js/wow.min.js"></script>

<script>
    $(function () {
        // 初始化singleNav
        $('.top-nav').singlePageNav({
            offset: 75
        })

        // 初始化wow动画
        new WOW({
            // callback: function() {
            //     console.log('哈哈');
            // }
        }).init()

        $('.navbar-collapse .nav-link').click(function() {
            $('.navbar-collapse').collapse('hide')
        })
    })
</script>